<template>
  <div class="activity-center">
    <div class="page-header">
      <h1>活动中心</h1>
      <p>发现精彩活动，丰富你的校园生活</p>
    </div>
    
    <!-- 搜索和筛选 -->
    <div class="search-section">
      <el-card>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-input
              v-model="searchForm.keyword"
              placeholder="搜索活动名称"
              :prefix-icon="Search"
              clearable
            />
          </el-col>
          <el-col :span="4">
            <el-select
              v-model="searchForm.clubId"
              placeholder="选择社团"
              clearable
            >
              <el-option
                v-for="club in clubs"
                :key="club.id"
                :label="club.name"
                :value="club.id"
              />
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-date-picker
              v-model="searchForm.dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-col>
          <el-col :span="4">
            <el-select
              v-model="searchForm.status"
              placeholder="活动状态"
              clearable
            >
              <el-option label="未开始" value="0" />
              <el-option label="进行中" value="1" />
              <el-option label="已结束" value="2" />
            </el-select>
          </el-col>
          <el-col :span="3">
            <el-button type="primary" @click="handleSearch">
              <el-icon><Search /></el-icon>
              搜索
            </el-button>
          </el-col>
          <el-col :span="3">
            <el-button @click="handleReset">
              <el-icon><Refresh /></el-icon>
              重置
            </el-button>
          </el-col>
        </el-row>
      </el-card>
    </div>
    
    <!-- 活动列表 -->
    <div class="activities-section">
      <el-row :gutter="20">
        <el-col
          v-for="activity in activityList"
          :key="activity.id"
          :span="8"
          class="activity-card-col"
        >
          <el-card class="activity-card" shadow="hover">
            <div class="activity-image">
              <img
                v-if="activity.image_url"
                :src="activity.image_url"
                :alt="activity.title"
              />
              <div v-else class="placeholder-image">
                <el-icon size="48" color="#c0c4cc">
                  <Calendar />
                </el-icon>
              </div>
              <div class="activity-status">
                <el-tag
                  :type="getStatusType(activity.status)"
                  size="small"
                >
                  {{ getStatusText(activity.status) }}
                </el-tag>
              </div>
            </div>
            
            <div class="activity-content">
              <h3 class="activity-title">{{ activity.title }}</h3>
              <p class="activity-description">
                {{ activity.content || '暂无描述' }}
              </p>
              
              <div class="activity-info">
                <div class="info-item">
                  <el-icon><OfficeBuilding /></el-icon>
                  <span>{{ activity.club_name }}</span>
                </div>
                <div class="info-item">
                  <el-icon><Location /></el-icon>
                  <span>{{ activity.location || '待定' }}</span>
                </div>
                <div class="info-item">
                  <el-icon><Clock /></el-icon>
                  <span>{{ formatDateTime(activity.start_time) }}</span>
                </div>
                <div class="info-item">
                  <el-icon><User /></el-icon>
                  <span>{{ activity.participant_count }}/{{ activity.max_participants || '不限' }}人</span>
                </div>
              </div>
            </div>
            
            <div class="activity-actions">
              <el-button
                v-if="!activity.isJoined"
                type="primary"
                @click="handleJoinActivity(activity.id)"
                :disabled="activity.status !== 0"
              >
                立即报名
              </el-button>
              <el-button
                v-else
                type="success"
                disabled
              >
                已报名
              </el-button>
              <el-button @click="handleViewDetail(activity.id)">
                查看详情
              </el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    
    <!-- 分页 -->
    <div class="pagination-section">
      <el-pagination
        v-model:current-page="pagination.currentPage"
        v-model:page-size="pagination.pageSize"
        :page-sizes="[12, 24, 48]"
        :total="pagination.total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Search, Refresh, Calendar, OfficeBuilding, Location, Clock, User } from '@element-plus/icons-vue'

export default {
  name: 'ActivityCenter',
  components: {
    Search,
    Refresh,
    Calendar,
    OfficeBuilding,
    Location,
    Clock,
    User
  },
  setup() {
    const searchForm = reactive({
      keyword: '',
      clubId: '',
      dateRange: [],
      status: ''
    })
    
    const clubs = ref([
      { id: 1, name: '摄影社团' },
      { id: 2, name: '篮球社团' },
      { id: 3, name: '编程社团' }
    ])
    
    const activityList = ref([
      {
        id: 1,
        title: '校园摄影大赛',
        content: '展示你的摄影才华，记录校园美好瞬间',
        image_url: '',
        club_name: '摄影社团',
        location: '艺术楼展厅',
        start_time: '2024-01-20 14:00:00',
        max_participants: 50,
        participant_count: 23,
        status: 0,
        isJoined: false
      },
      {
        id: 2,
        title: '篮球友谊赛',
        content: '与其他学校进行篮球友谊赛，增进交流',
        image_url: '',
        club_name: '篮球社团',
        location: '体育馆',
        start_time: '2024-01-18 15:00:00',
        max_participants: 20,
        participant_count: 18,
        status: 1,
        isJoined: true
      },
      {
        id: 3,
        title: '编程技术分享会',
        content: '分享最新的编程技术和开发经验',
        image_url: '',
        club_name: '编程社团',
        location: '计算机楼201',
        start_time: '2024-01-15 19:00:00',
        max_participants: 100,
        participant_count: 45,
        status: 2,
        isJoined: false
      }
    ])
    
    const pagination = reactive({
      currentPage: 1,
      pageSize: 12,
      total: 25
    })
    
    const getStatusType = (status) => {
      const typeMap = {
        0: 'primary',
        1: 'success',
        2: 'info'
      }
      return typeMap[status] || 'info'
    }
    
    const getStatusText = (status) => {
      const textMap = {
        0: '未开始',
        1: '进行中',
        2: '已结束'
      }
      return textMap[status] || '未知'
    }
    
    const formatDateTime = (dateTime) => {
      if (!dateTime) return '待定'
      const date = new Date(dateTime)
      return date.toLocaleString('zh-CN', {
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
      })
    }
    
    const handleSearch = () => {
      console.log('搜索条件:', searchForm)
      // 这里实现搜索逻辑
    }
    
    const handleReset = () => {
      Object.assign(searchForm, {
        keyword: '',
        clubId: '',
        dateRange: [],
        status: ''
      })
      handleSearch()
    }
    
    const handleJoinActivity = (activityId) => {
      ElMessage.success('报名成功！')
      // 这里实现报名逻辑
    }
    
    const handleViewDetail = (activityId) => {
      console.log('查看活动详情:', activityId)
      // 这里实现查看详情逻辑
    }
    
    const handleSizeChange = (val) => {
      pagination.pageSize = val
      // 重新加载数据
    }
    
    const handleCurrentChange = (val) => {
      pagination.currentPage = val
      // 重新加载数据
    }
    
    onMounted(() => {
      // 初始化数据
    })
    
    return {
      searchForm,
      clubs,
      activityList,
      pagination,
      getStatusType,
      getStatusText,
      formatDateTime,
      handleSearch,
      handleReset,
      handleJoinActivity,
      handleViewDetail,
      handleSizeChange,
      handleCurrentChange
    }
  }
}
</script>

<style lang="scss" scoped>
.activity-center {
  .page-header {
    margin-bottom: 24px;

    h1 {
      margin: 0 0 8px;
      font-size: 28px;
      font-weight: 600;
      color: #303133;
    }

    p {
      margin: 0;
      font-size: 16px;
      color: #606266;
    }
  }

  .search-section {
    margin-bottom: 24px;
  }

  .activities-section {
    margin-bottom: 32px;

    .activity-card-col {
      margin-bottom: 20px;
    }

    .activity-card {
      height: 100%;
      transition: transform 0.2s;

      &:hover {
        transform: translateY(-2px);
      }

      .activity-image {
        position: relative;
        height: 200px;
        margin: -20px -20px 16px;
        border-radius: 6px 6px 0 0;
        overflow: hidden;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .placeholder-image {
          width: 100%;
          height: 100%;
          background: #f5f7fa;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .activity-status {
          position: absolute;
          top: 12px;
          right: 12px;
        }
      }

      .activity-content {
        .activity-title {
          margin: 0 0 8px;
          font-size: 18px;
          font-weight: 600;
          color: #303133;
          line-height: 1.4;
        }

        .activity-description {
          margin: 0 0 16px;
          font-size: 14px;
          color: #606266;
          line-height: 1.5;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }

        .activity-info {
          .info-item {
            display: flex;
            align-items: center;
            margin-bottom: 8px;
            font-size: 13px;
            color: #606266;

            .el-icon {
              margin-right: 6px;
              font-size: 14px;
            }

            &:last-child {
              margin-bottom: 0;
            }
          }
        }
      }

      .activity-actions {
        display: flex;
        gap: 8px;
        margin-top: 16px;
      }
    }
  }

  .pagination-section {
    display: flex;
    justify-content: center;
  }
}
</style>
